import React from 'react'
import { Cascader } from 'antd';
import api from '../../../api/area';
import { Map, Marker } from 'react-amap';
import './index.less'

export default class AMapSelectMarker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      main: {
        id: new Date().getTime()+"",
        center: null,
        zoom: this.props.zoom || 13,
        defaultValue: this.props.defaultValue || this.props.value
      }
    };
    this.amapEvents = {
      click: (e) => {
        let lnglat = e.lnglat;
        let defaultValue = this.state.main.defaultValue || [];
        defaultValue.splice(0, defaultValue.length);
        defaultValue.push(lnglat.lng);
        defaultValue.push(lnglat.lat);
        defaultValue.isChange = true;
        this.main.setMainState("defaultValue", defaultValue);
        this.props.onChange && this.props.onChange(defaultValue);
      },
      created: (map) => {
        if (!this.state.main.center) {
          this.main.setMainState("center", [map.getCenter().lng, map.getCenter().lat]);
        }
        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
          var autoOptions = {
            //city: "重庆", //城市，默认全国
            input: this.state.main.id//使用联想输入的input的id
          };
          let autocomplete = new AMap.Autocomplete(autoOptions);
          let placeSearch = new AMap.PlaceSearch({
            //city: '重庆',
            map
          })
          AMap.event.addListener(autocomplete, "select", function (e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name)
          });
        });
      }
    };
    this.mapPlugins = ['OverView', 'ToolBar'];
    this.main = {
      props: {
        zoom: this.props.zoom || 13,
        placeholder: this.props.placeholder || "搜索区域",
        defaultValue: this.props.defaultValue, //默认坐标,类型数组
        onChange: this.props.onChange, //坐标改变的时候触发事件
        clearIsResetCenter: this.props.clearIsResetCenter || false //form执行清空操作是否恢复中心点,默认false(设置默认值时,此值无效)
      },
      inputChange: (e) => {
        let returnValue = this.state.main.defaultValue || [];
        returnValue.isChange = true;
        this.props.onChange && this.props.onChange(returnValue);
      },
      setMainState: (key, value) => {
        let main = this.state.main;
        main[key] = value;
        this._isMounted && this.setState({
          main
        });
      }
    }
  }
  componentDidMount = () => {
    if (this.state.main.defaultValue) {
      this.main.onChange && this.main.onChange(this.state.main.defaultValue);
    }
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps["data-__meta"].initialValue === undefined && nextProps.value === undefined) {
      this.main.setMainState("defaultValue", null);
      this.refs.searchInput.value = "";
    }
    if (nextProps["data-__meta"].initialValue !== undefined && "value" in nextProps && nextProps["data-__meta"].initialValue == nextProps.value) {
      this.main.setMainState("defaultValue", nextProps.value);
      this.refs.searchInput.value = "";
    }
  }

  componentWillMount = () => {
    this._isMounted = true;
  }
  componentWillUnmount() {
    this._isMounted = false
  }

  render() {
    if (!this.state.main.defaultValue) {
      if (!this.state.main.center || !this.main.props.clearIsResetCenter) {
        return (
          <div className="amapMarker">
            <Map
              events={this.amapEvents}
              plugins={this.mapPlugins}
              zoom={this.main.props.zoom}
            >
            </Map>
            <input id={this.state.main.id} onChange={this.main.inputChange} ref="searchInput" autoComplete="off" className="keyword" name="keyword" type="text" placeholder="搜索" />
          </div >
        )
      } else {
        return (
          <div className="amapMarker">
            <Map
              events={this.amapEvents}
              plugins={this.mapPlugins}
              zoom={this.main.props.zoom}
              center={{ longitude: this.state.main.center[0], latitude: this.state.main.center[1] }}
            >
            </Map>
            <input id={this.state.main.id} onChange={this.main.inputChange} ref="searchInput" autoComplete="off" className="keyword" name="keyword" type="text" placeholder="搜索" />
          </div >
        )
      }
    }
    let defaultValue = {};
    defaultValue.longitude = this.state.main.defaultValue[0];
    defaultValue.latitude = this.state.main.defaultValue[1];
    return (
      <div className="amapMarker">
        <Map
          events={this.amapEvents}
          plugins={this.mapPlugins}
          zoom={this.state.main.zoom}
          center={defaultValue}
        >
          {<Marker position={defaultValue} />}
        </Map>
        <input id={this.state.main.id} onChange={this.main.inputChange} ref="searchInput" className="keyword" autoComplete="off" name="keyword" type="text" placeholder="搜索" />
      </div >
    )
  }
}